<template>
  <div id="majorNav">
    <div class="df" style="flex-wrap: wrap">
      <div
        class="major-item curr f14"
        :class="{ isactive: isActive === index }"
        v-for="(item, index) in majorsList"
        :key="item.code"
        @click="handleIsActive(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const emits = defineEmits(['handleNavScorll']);
const isActive = ref(-1);
const { majorsList } = defineProps({
  majorsList: {
    type: Array,
    required: true,
  },
});
const handleIsActive = (item, index) => {
  emits('handleNavScorll', index);
  isActive.value = index;
};
const handleClearActive = () => {
  isActive.value = -1;
};
defineExpose({
  handleClearActive,
});
</script>
<style scope lang="scss">
#majorNav {
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  padding-bottom: 10px;
  .major-item {
    margin: 20px 20px 0 20px;
    &:hover {
      color: var(--color-text);
    }
  }
  .isactive {
    color: var(--color-text);
  }
}
</style>
